<template>
  <div class="side-menu flex-col gap-y-32">
    <div
      v-for="item in spaceOptions"
      :key="item.key"
      class="side-menu-item flex-col cursor-pointer items-center gap-8"
      :class="{ active: activeSpaceKey === item.key }"
      @click="handleSelectSpace(item)"
    >
      <img
        class="h-40 w-40"
        :src="getImg(activeSpaceKey === item.key ? `${item.key}_active` : item.key)"
      />
      <div class="label text-14 color-#4B4A50">{{ item.label }}</div>
    </div>
  </div>
  <teleport v-if="isMounted" to="#layout-child-menu">
    <div
      class="mt-20 flex items-center gap-12 transition-all-400"
      :class="[collapsed ? 'w-60 justify-center' : 'ml-20']"
    >
      <i class="iconfont icon-caidanzhankai cursor-pointer" @click="collapsed = !collapsed"></i>
      <div v-if="!collapsed" class="text-20 color-#313335 font-500">
        {{ activeSpaceLabel }}
      </div>
    </div>
    <n-layout has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="60"
        :width="196"
        :collapsed="collapsed"
      >
        <n-menu
          :value="activeMenuKey"
          :collapsed="collapsed"
          :collapsed-width="60"
          :options="menuOptions"
          @update:value="handleSelectMenu"
        />
      </n-layout-sider>
    </n-layout>
  </teleport>
</template>
<script setup lang="jsx">
defineOptions({
  name: 'SideMenu',
})
import { useMounted } from '@vueuse/core'
import { usePermissionStore } from '@/store'
import { findPage } from '@/utils/common'
const router = useRouter()
const route = useRoute()
const isMounted = useMounted()
const getImg = (name) => new URL(`../../assets/images/space/${name}.png`, import.meta.url).href
const permissionStore = usePermissionStore()
// 控制是否收起
const collapsed = ref(false)
// 空间选项
const spaceOptions = computed(() => permissionStore.menus.filter((item) => item.menuFlag === 1))
// 当前活跃空间
const activeSpaceKey = computed(() => route.meta?.rootKey || route.name)
const activeSpaceLabel = computed(
  () => spaceOptions.value.find((item) => item.key === activeSpaceKey.value).label
)

// 空间切换后，默认选中第一个菜单路由
function handleSelectSpace(item) {
  const pagePath = findPage(item?.children || [])
  if (pagePath) {
    router.push(pagePath)
  }
}

// 当前活跃的子菜单
const activeMenuKey = computed(() => (route.meta?.menuFlag ? route.name : route.meta?.parentKey))
// 当前活跃的子菜单选项
const menuOptions = computed(
  () => spaceOptions.value.find((item) => item.key === activeSpaceKey.value)?.children || []
)
// 跳转对应路由
function handleSelectMenu(_, item) {
  router.push(item.path)
}
</script>
<style lang="scss" scoped>
.side-menu-item {
  font-size: 13px;
  color: #4a4d50;
  &:hover {
    .label {
      color: #101112;
      font-weight: 500;
    }
  }
  &.active {
    .label {
      color: #101112;
      font-weight: 500;
    }
  }
}
:deep() .n-menu {
  .n-menu-item-content__icon {
    width: 16px !important;
  }
  // &:not(.n-menu--collapsed) {
  .n-menu-item-content {
    padding-left: 20px !important;
  }
  // }
  &.n-menu--collapsed {
    .n-menu-item-content__icon {
      margin-left: 2px;
    }
  }
}
</style>
